<template>
  <Panel title="车位信息" width="380px">
    <div class="parkade">
      <div class="info">
        <div class="item">
          <Icon name="entrance" :size="36"></Icon>
          <div class="in">138</div>
          <div>入场车辆</div>
        </div>
        <div class="item">
          <Icon name="export" :size="36"></Icon>
          <div class="out">100</div>
          <div>离场车辆</div>
        </div>
      </div>
      <div class="chart" ref="chartRef"></div>
    </div>
  </Panel>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";

const chartRef = ref();
//"剩余", "总数"
onMounted(() => {
  echarts.init(chartRef.value).setOption({
    grid: {
      left: 30,
      right: 0,
      top: 20,
      bottom: 20,
    },
    legend: {
      icon: "roundRect",
      right: 0,
      data: [{name:"剩余",itemStyle:{color:"#2560FF"}},{name:"总数",itemStyle:{color:"#404451"}}],
      textStyle: {
        color: "#FFFFFF",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    // color: ["#2560FF", "#404451"],
    xAxis: {
      type: "category",
      data: ["-1F", "-2F", "-3F"],
      axisLine: {
        lineStyle: {
          color: "#FFFFFF80",
        },
      },
      axisTick: {
        show: true,
        length: 2,
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#FFFFFF80",
        },
      },
      axisTick: {
        show: true,
        length: 2,
      },
    },
    series: [
      {
        name: "剩余",
        symbol: "none",
        stack: "parkade",
        data: [68, 80, 99],
        type: "bar",
        emphasis: {
          focus: "series",
        },
        barWidth: 10,
        smooth: true,

        itemStyle: {
          color:"rgba(255,255,255,0)",
          decal: {
            color: "#2560FF",
            dashArrayX: [1, 0],
            dashArrayY: 4,
            rotation: 0,
          },
        },
      },
      {
        name: "总数",
        symbol: "none",
        stack: "parkade",
        data: [180, 320, 260],
        type: "bar",
        emphasis: {
          focus: "series",
        },
        smooth: true,
        itemStyle: {
          color:"rgba(255,255,255,0)",
          decal: {
            color: "#404451",
            dashArrayX: [1, 0],
            dashArrayY: 4,
            rotation: 0,
          },
        },
      },
    ],
  });
});
</script>
<style lang="scss" scoped>
.parkade {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #ffffff;
  align-items: center;
  margin: 16px 0px;
  .info {
    display: flex;
    flex-direction: column;
    .item {
      display: flex;
      flex-direction: row;
      font-size: 16px;
      align-items: center;
      gap: 4px;
      padding: 16px 0px;
      .in {
        font-size: 40px;
        background: linear-gradient(242deg, #ffd25d 3%, #ff4c25 107%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }
      .out {
        font-size: 40px;
        background: linear-gradient(238deg, #5dffff 0%, #2560ff 107%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }
    }
    .item:first-child{
      border-bottom: 1px solid #FFFFFF20;
    }
  }

  .chart {
    height: 210px;
    width: 50%;
  }
}
</style>
